<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <div style="width: 100%; text-align: center; margin-top: 15 0px;">
        <h2>表白墙</h2>
        输入后点击提交，会将信息显示在表格中<br>
        <p>谁：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="text" id="username">
        </p>
        <p>对谁：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="text" id="toUsername">
        </p>
        <p>说什么：&nbsp;&nbsp;
            <input type="text" id="msg">
        </p>
        <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button onclick="mysub()">提交</button>
        </p>

        <div id="showMsg">

        </div>
    </div>
    
    <script>

        function mysub(){
            // 通过 JQuery 获取 input 控件
        var inputUsername = jQuery("#username");
        var inputToUsername = jQuery("#toUsername");
        var inputMsg = jQuery("#msg");

        // 1. 非空校验
        if(inputUsername.val().trim() ==""){
            alert("请先输入名字");
            inputUsername.focus();
            return;
        }
        if(inputToUsername.val().trim() ==""){
            alert("请先输入对方名字");
            inputToUsername.focus();
            return;
        }
        if(inputMsg.val().trim() ==""){
            alert("请先输入信息");
            inputMsg.focus();
            return;
        }

        // 2. 将内容展示在表白墙
        jQuery("#showMsg").append(
            inputUsername.val() +"  对 " + inputToUsername.val() + "  说：" + inputMsg.val() + "<p></p>"
            )

        // 3. 清空输入的内容
        inputUsername.val("");
        inputToUsername.val("");
        inputMsg.val("");
        }
        
        
        
        

    </script>
</body>
</html>